<template>
  <div class="edit">
    <ul style="width: 100%; height: 100%">
      <li class="EditorStyleBox">
        <div class="EditorStyleHeader">
          <p>
            <a-popconfirm
              title="确认关闭？如果有内容变更，请先保存。"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm"
              @cancel="cancel"
            >
              <close-outlined />
            </a-popconfirm>
          </p>
          <p>
            <img class="SaveImgX" :src="setObj.img" alt="" />{{ setObj.title }}
          </p>
          <p><setting-outlined /></p>
        </div>
        <div class="EditorStyleBody">
          <p>
            <a-button
              class="SaveBtn"
              type="primary"
              :loading="loading"
              @mouseenter="loading = true"
              >保存</a-button
            >
          </p>
          <ul class="ComTextAddBtn">
            <li>{{this.labelMockArray.length}}篇文章</li>
            <li class="AddIpt">
              <p>
                <a-button @click="AddInsertBtn" type="primary"
                  ><plus-outlined />新建</a-button
                >
              </p>
              <div v-if="this.isShow" class="RgbaIpt">
                <p><input v-model="forFrom.title" class="Aip" type="text" /></p>
                <p>
                  <a-button @click="AddSetTbTNeGG" class="AddBtn" type="primary"
                    >新建</a-button
                  >
                </p>
              </div>
            </li>
          </ul>

          <div
            v-for="(item, idx) in labelMockArray"
            :key="idx"
            class="titleStyleBox"
          >
            <p>
              <menu-unfold-outlined /><span>&nbsp;{{ item.title }}</span>
            </p>
            <p>
              <a-popconfirm
                title="确认删除?"
                ok-text="确定"
                cancel-text="删除"
              >
                <p><delete-outlined @click="DelAdd(item)" /></p>
              </a-popconfirm>
            </p>
          </div>
        </div>
        <div class="EditorStyleFooter"></div>
      </li>
      <li class="EditorLeft">
        <v-md-editor
          :include-level="[3, 4]"
          v-model="text"
          toc-nav-position-right
          default-show-toc
          class="editor"
          height="100%"
          left-toolbar="undo redo | image | emoji"
          :disabled-menus="[]"
          @upload-image="handleUploadImage"
        >
        </v-md-editor>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import axios from "axios";
import {
  CloseOutlined,
  PlusOutlined,
  SettingOutlined,
  MenuUnfoldOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
export default {
  data() {
    return {
      text: `
# 欢迎使用 Wipi Markdown 编辑器

> * 整理知识，学习笔记
> * 发布日记，杂文，所见所想
> * 撰写发布技术文稿（代码支持）

## 什么是 Markdown

Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，**粗体** 或者 *斜体* 某些文字。

### 1. 待办事宜 Todo 列表

- [ ] 支持以 PDF 格式导出文稿
- [x] 新增 Todo 列表功能

### 2. 高亮一段代码[^code]



### 3. 绘制表格

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | 1600 |   5     |
| 手机        |   12   |   12   |
| 管线        |    10    |  234  |

### 4. 嵌入网址
<iframe src="//player.bilibili.com/player.html?aid=77737877&bvid=BV1xJ411z7eS&cid=132993821&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>


`,
      id: "",
      flog: true, //发布
      setObj: {},
      isShow: false,
      forFrom: {
        title: "",
      },
      labelMockArray: [], //添加数据渲染
    };
  },
  beforeCreate() {},
  setup() {
    const iconLoading = ref(false);

    const enterIconLoading = () => {
      iconLoading.value = {
        delay: 1000,
      };
      setTimeout(() => {
        iconLoading.value = false;
      }, 6000);
    };
    const confirm = (e) => {
      history.go(-1);
      message.success("Click on Yes");
    };

    const cancel = (e) => {
      console.log(e);
      message.error("Click on No");
    };

    return {
      confirm,
      cancel,
      loading: ref(false),
      iconLoading,
      enterIconLoading,
    };
  },
  created() {
      console.log(this.labelMockArray.length,"sss");
    let {
      params: { id },
    } = this.$route;
    axios.get("/api/getMock").then((res) => {
      console.log(res, "Res");
      const obj = res.data.data.find((item) => item.id == id);
      this.setObj = obj;
    });
    // let { id } = this.$route.query;
    if (id) {
      this.id = id; //发布
      this.flog = false;
      this.text = "编辑内容";
    } else {
      this.id = ""; //编辑
      this.flog = true;
    }
    this.AddMockInterFunc(); //添加数据渲染函数
  },
  methods: {
    async DelAdd(item) {
      let res = await axios.delete(`/api/DelRDelMock/${item.id}`);
      message.success(res.data.message);
      this.AddMockInterFunc();
    },
    //添加数据渲染函数
    async AddMockInterFunc() {
      let res = await axios.post("/api/labelFunc");
      this.labelMockArray = res.data.data;
      this.AddMockInterFunc();
    },
    //新建 关闭 弹框
    async AddSetTbTNeGG() {
      let res = await axios.post("/api/labelMock", { ...this.forFrom });
      console.log(res, "Res...");
      this.isShow = false;
    },
    AddInsertBtn() {
      //新建 弹框
      this.isShow = true;
    },

    //发布 或者 编辑
    save() {
      if (this.flog) {
        //发布
      } else {
        //编辑
      }
    },
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files);

      // 此处只做示例
      insertImage({
        url: "https://tse1-mm.cn.bing.net/th/id/R-C.22c0d768354bf0ea9eabcd6cf08be5c1?rik=YOfUyIUAn%2fMkYQ&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20181231%2f74cfefdf4bae4f049219eea062498474.jpeg&ehk=jLod4zq3MXc1Mxft7yxILWXKMOPYPaExKPaKUuw%2frLY%3d&risl=&pid=ImgRaw&r=0",
        desc: "七龙珠",
        // width: 'auto',
        // height: 'auto',
      });
    },
  },
  components: {
    CloseOutlined,
    SettingOutlined,
    PlusOutlined,
    MenuUnfoldOutlined,
    DeleteOutlined,
  },
};
</script>

<style>
.edit {
  width: 100%;
  height: 100%;
}
.edit > ul {
  display: flex;
}
.titleStyleBox {
  width: 200px;
  height: 40px;
  padding: 12px 0;
  margin: 10px;
  border-radius: 10px;
  background: rgb(253, 251, 251);
  user-select: none;
  display: flex;
  justify-content: space-around;
}
.Aip {
  height: 35px;
  margin-top: 10px;
}
.AddBtn {
  margin-top: 10px;
  height: 35px;
  outline: none;
  padding: 5px;
}
.RgbaIpt {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 300px;
  height: 50px;
  position: absolute;
  right: 1208px;
  max-width: calc(100vw - 48px);
  margin-bottom: 16px;
  margin-left: auto;
  padding: 16px 24px;
  overflow: hidden;
  line-height: 1.5715;
  word-wrap: break-word;
  z-index: 999;
  background: rgb(255, 251, 251);
  border-radius: 2px;
  box-shadow: 0 4px 12px #00000026;
}
.RgbaIpt {
  display: flex;
  align-items: center;
}
.EditorStyleBox {
  width: 13%;
  height: 100%;
  background: #eff2f5;
}
.AddIpt {
  display: flex;
}
.ComTextAddBtn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.EditorStyleHeader {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.SaveBtn {
  width: 170px;
  margin-left: 30px;
}
.EditorStyleHeader > p {
  margin-top: 10px;
}
.EditorLeft {
  width: 87%;
  height: 100%;
}
.SaveImgX {
  width: 40px;
  height: 40px;
  border-radius: 50px;
}
</style>